<template>
	<MyDialog v-model="show" title="分组方案明细" @confirm="saveGroupData">

		<div class="view-content-style view-content-height-style"
			:style="{backgroundColor: styleObject.pageContentBackgroundColor}">
			<div class="view-group-style">
				<popup-content content="分组名称" :padding-bottom="5" :prefix="true">
					<el-input v-model="groupName" :clearable="true"></el-input>
				</popup-content>
				<popup-content content="分组数量" :padding-bottom="5" :prefix="true">
					<el-input-number :step="1" :max="100" v-model="groupNumber"></el-input-number>
				</popup-content>
			</div>
		</div>

		<div class="view-content-style1 view-content-height-style"
			:style="{backgroundColor: styleObject.pageContentBackgroundColor}" v-for="(item,index) in studentGroupDetailList">
			<div class="view-group-content-style">
				<div class="view-group-style">
					第{{item.orderSort}}组
					<div class="icon-style">
						<el-icon>
							<UserFilled size="24" @click="addStudent(index)" />
						</el-icon>
						<el-icon>
							<Delete size="24" color="red" v-if="index != 0" @click="removeAll(index)" />
						</el-icon>
						<!-- <u-icon name="man-add" size="24" @click="addStudent(index)"></u-icon> -->
						<!-- <u-icon name="trash" size="24" color="red" v-if="index != 0" @click="removeAll(index)"></u-icon> -->
					</div>
				</div>
				<div>
					<div class="tag-style">
						<el-tag plain closable v-for="(item1,i) in item.studentIdList" :key="i" @close="removeOne(index,item1.id)"
							class="el-tag-style">{{item1.studentName}}</el-tag>
					</div>
				</div>
			</div>
		</div>

		<!-- 		<div style="position: fixed;bottom:36px;width:90%;left:5%;z-index: 2;">
			<div style="margin-bottom:10px"><el-button type="primary" shape="circle" @click="saveGroupData">保存分组方案</el-button>
			</div>
		</div> -->

		<MyDialog v-model="studentListPopupShow" title="学生详情" @confirm="confirmStudent">
			<div style="height:55vh;padding:20px;overflow: auto;position: relative;">
				<div style="padding: 20px;">
					<!-- 			<u-search shape="square" placeholder="请输入姓名" v-model="studentName" :clearabled="true"
						:showAction="false"></u-search> -->
					<el-input v-model="studentName" style="width: 240px" placeholder="请输入姓名" prefix-icon="Search" />
				</div>
				<el-checkbox-group v-model="studentIdList" placement="column" v-if="studentList.length > 0">
					<label v-for="(item,index) in studentList" :key="index">
						<div class="list-cell">
							<div>
								<el-checkbox :value="item.id" :checked="item.checked" :label="(item.orderBySort)+'.'+item.studnetName"
									style="transform:scale(0.9)" :active-color="styleObject.buttonColor" />
							</div>
						</div>
					</label>
				</el-checkbox-group>
			</div>
		</MyDialog>
	</MyDialog>
</template>

<script>
	import myMixin from '@/utils/myMixin.js'
	import popupContent from '@/components/popupContent.vue';
	import MyDialog from '@/components/MyDialog.vue'
	import {
		useMouse
	} from '@/utils/index.js'
	var that;
	export default {
		mixins: [myMixin], //混入
		components: {
			popupContent,
			MyDialog
		},
		data() {
			return {
				show: true,
				classNameId: '',
				studentName: '',
				studentListPopupShow: false, //学生多选
				studentList: [], //学生信息
				studentList1: [], //学生信息1
				studentIdList: [], //当前分组选择的学生
				studentIdList1: [], //当前分组选择的学生副本
				allStudentIdList: [], //已选学生列表
				defaultIndex: 0,
				studentGroupId: '',
				groupId: '',
				groupNumber: 1,
				groupName: '',
				studentGroupDetailList: [{
					id: '',
					studentGroupId: '',
					orderSort: 1,
					studentIdList: [], //学生id
				}]
			}
		},
		watch: {
			studentIdList(news, old) {
				console.log(news);
				console.log(old);
				that.studentList.map(student => {
					if (news.indexOf(student.id) != -1) {
						student.checked = true;
					} else {
						student.checked = false;

						that.studentIdList1 = that.studentIdList1.filter(id => id != student.id);
						// that.allStudentIdList = that.allStudentIdList.filter(id => id != student.id);
					}
				})

			},
			studentName(news, old) {
				console.log(news, old);

				let studentIdList = that.studentGroupDetailList[that.defaultIndex].studentIdList;
				console.log(studentIdList);

				that.studentList = that.studentList1.filter(student => (that.allStudentIdList.indexOf(student.id) == -1 ||
					studentIdList.filter(student1 => student1.id == student.id).length > 0) && student.studnetName.indexOf(
					news) != -1).map(student => {
					student.checked = false;
					return student;
				});

				console.log(that.studentList, "---");

				that.studentIdList1 = Array.from(new Set(that.studentIdList1.concat(that.studentIdList)));
				that.studentIdList = that.studentIdList1;
			},
			groupNumber: (news, old) => {
				console.log(news, old);
				let studentGroupDetailList = that.studentGroupDetailList;
				let length = studentGroupDetailList.length;
				console.log(length, news);

				if (length > news) {
					//删除学生id
					that.removestudentIdList(news, []);

					studentGroupDetailList.splice(news, length)
				} else if (length < news) {
					for (var i = 0; i < news - length; i++) {
						studentGroupDetailList.push({
							id: '',
							studentGroupId: '',
							orderSort: (length + i + 1),
							studentIdList: [], //学生id
						});
					}
				}
			},
			show(news) {
				this.$emit("close")
			},
			classNameId(news) {
				if (news) {
					this.getData();
				}
			}
		},
		setup() {
			return useMouse();
		},
		mounted(option) {
			that = this;
			// that.studentGroupId = option.studentGroupId ?? ''
			// that.classNameId = option.classNameId ?? ''
			// that.getData();
		},
		methods: {
			async saveGroupData() {
				if (!that.groupName) {
					return that.warningMessage("请填写分组名称")
				}

				for (var i = 0; i < that.studentGroupDetailList.length; i++) {
					if (that.studentGroupDetailList[i].studentIdList.length == 0) {
						return that.warningMessage("第" + (i + 1) + "组没有选择")
					}
				}

				await that.$asyncHttpJson(
					"/studentGroup/saveGroupData?groupId=" + that.groupId + "&groupName=" + that.groupName +
					"&studentGroupId=" + that.studentGroupId + "&classNameId=" + that.classNameId, {
						data: that.studentGroupDetailList
					}
				)

				this.$emit("close")

			},
			removeAll(index) {
				//删除学生id
				that.removestudentIdList(index, []);
				that.studentGroupDetailList.splice(index, 1);
				that.groupNumber--;

				for (var i = 0; i < that.studentGroupDetailList.length; i++) {
					that.studentGroupDetailList[i].orderSort = i + 1;
				}
			},
			removeOne(index, id) {

				let studentIdList = that.studentGroupDetailList[index].studentIdList;
				that.studentGroupDetailList[index].studentIdList = studentIdList.filter(student => student.id != id);
				console.log(that.studentGroupDetailList[index].studentIdList);
				//删除学生id
				//删除未选择的
				that.allStudentIdList = that.allStudentIdList.filter(id1 => id != id1);
			},
			//打开弹窗
			addStudent(index) {
				that.studentIdList = [];
				that.studentIdList1 = [];
				that.studentName = ''

				that.studentListPopupShow = true;
				that.defaultIndex = index;
				let studentIdList = that.studentGroupDetailList[that.defaultIndex].studentIdList;
				that.studentIdList = studentIdList.map(student => student.id);
				console.log(that.studentIdList);

				//筛选后的学生数据
				that.studentList = that.studentList1.filter(student => that.allStudentIdList.indexOf(student.id) == -1 ||
						studentIdList.filter(student1 => student1.id == student.id).length > 0)
					.map(student => {
						student.checked = false;
						return student;
					});
			},
			//选择学生确认
			confirmStudent() {
				that.studentListPopupShow = false;
				let studentIdLists = new Array();
				let student;

				that.studentIdList1 = Array.from(new Set(that.studentIdList1.concat(that.studentIdList)));
				that.studentIdList = that.studentIdList1;

				that.studentIdList.forEach(id => {
					student = that.studentList1.filter(student => student.id == id)[0];
					studentIdLists.push({
						id: id,
						studentName: student.studnetName,
					})
					//存储全部已选择的学生
					that.allStudentIdList.push(id);
				})

				//删除学生id
				that.removestudentIdList(that.defaultIndex, studentIdLists);

				that.studentGroupDetailList[that.defaultIndex].studentIdList = studentIdLists;
				that.studentIdList = [];

			},
			//删除学生id
			removestudentIdList(defaultIndex, studentIdLists) {
				//查询被删除的
				let studentIdList = that.studentGroupDetailList[defaultIndex].studentIdList;
				studentIdList = studentIdList.filter(student => studentIdLists.filter(student1 => student1.id == student.id)
					.length == 0);
				//删除未选择的
				that.allStudentIdList = that.allStudentIdList.filter(id => studentIdList.filter(student1 => student1.id ==
						id)
					.length == 0);
				//数组去重复
				that.allStudentIdList = Array.from(new Set(that.allStudentIdList));

				console.log(that.allStudentIdList);
			},
			closeStudentListPopup() {
				that.studentListPopupShow = false;
				that.studentIdList = [];
				that.studentIdList1 = [];
				that.studentName = ''
			},
			async getData() {
				const
					data = await that.$asyncHttpConfig({
						url: "/studentGroup/selectStudentGroup",
						data: {
							studentGroupId: that.studentGroupId,
							classNameId: that.classNameId
						}
					})

				that.groupName = data.studentGroup?.groupName ?? '';
				that.groupId = data.studentGroup?.id ?? '';
				that.studentList1 = data.studentList;
				that.allStudentIdList = []


				if (data.studentGroupDetailList.length > 0) {
					let studentGroupDetailList = data.studentGroupDetailList;
					studentGroupDetailList.forEach(value => {
						value.studentIdList = value.studentIdList.map(item => {
							let items = item.split(":");
							console.log(items);
							return {
								id: items[0],
								studentName: items[1],
							};
						})

						value.studentIdList.forEach(item => {
							that.allStudentIdList.push(item.id)
						})
					})
					console.log(studentGroupDetailList);
					that.studentGroupDetailList = studentGroupDetailList;
					that.groupNumber = studentGroupDetailList.length;
				}
			}
		}
	}
</script>

<style>
	.view-group-style {
		width: 100%;
		padding-bottom: 10px;
	}

	.view-group-content-style {
		padding: 15px 15px;
		position: relative;
	}

	.view-content-height-style {
		min-height: 10px;
	}

	.icon-style {
		position: absolute;
		right: 10px;
		top: 14px;
		width: 50px;
		display: flex;
	}

	.tag-style {
		display: flex;
		flex-wrap: wrap;
	}

	.view-content-style1 {
		background-color: #ffffff;
		margin: 10px auto;
		border-radius: 8px;
		overflow-y: auto;
		width: 96%;
	}

	.el-tag-style {
		margin-right: 5px;
	}
</style>